<!-- 设备管理-设备列表页面 -->
<template>
  <div class="app-container">
    <px-form v-show="showSearch" ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
      <px-form-item label="核算模板名称">
        <px-input v-model="queryParams.templateName" :maxlength="50" placeholder="请输入" clearable />
      </px-form-item>
      <px-form-item label="状态">
        <px-select v-model="queryParams.templateStatus" placeholder="请选择状态" clearable style="width: 240px" filterable>
          <px-option v-for="dict in templateStatusList" :key="dict.itemName" :label="dict.itemName" :value="dict.itemValue" />
        </px-select>
      </px-form-item>
      <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery('search')">搜索</px-button>
      <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
    </px-form>

    <px-row :gutter="10" class="mb8">
      <px-col :span="1.5" class="treeinput">
        <px-button v-has="'ACCOUNTINGBOUNDARY_ADD'" type="primary" icon="" @click="handleAdd">新增</px-button>
      </px-col>
      <!-- <px-col :span="1.5">
        <px-button v-has="'ACCOUNTINGBOUNDARY_EXPORT'" type="primary" plain icon="" @click="handleExport">导入</px-button>
      </px-col> -->
    </px-row>

    <px-table v-if="!addVisible && !detailVisible" v-loading="loading" :data="typeList" height="calc(100vh - 319px)" border>
      <px-table-column label="序号" fixed="left" type="index" width="70">
        <template #default="{ $index }">
          {{ $index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
        </template>
      </px-table-column>
      <px-table-column label="核算模板名称" width="290" prop="templateName">
        <template #default="scope">
          <!-- <span>{{ scope.row.templateName }}</span> -->
          <px-input
            v-model="scope.row.templateName"
            :maxlength="50"
            placeholder="请输入"
            clearable
            @focus="handleFocus(scope.row)"
            @blur="handleBlur(scope.row)"
          />
          <!-- <px-button v-has="'ACCOUNTINGBOUNDARY_TEMPLATE'" link type="primary" @click="handletemplate(scope.row.id)">
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon><EditPen /></px-icon> </px-tooltip
          ></px-button> -->
        </template>
      </px-table-column>

      <px-table-column label="边界范围" width="600" prop="boundaryName">
        <template #default="scope">
          <span>{{ scope.row.boundaryName }}</span>
        </template>
      </px-table-column>

      <px-table-column label="状态" width="80" align="center" prop="templateStatus">
        <template #default="scope">
          <div class="legend-item">
            <span v-if="scope.row.templateStatus == '启用'" class="legend-icon background-done" /><span
              v-if="scope.row.templateStatus == '启用'"
              class="legend-text"
              >{{ scope.row.templateStatus }}</span
            >
            <span v-if="scope.row.templateStatus == '禁用'" class="legend-icon background-done2" /><span
              v-if="scope.row.templateStatus == '禁用'"
              class="legend-text2"
              >{{ scope.row.templateStatus }}</span
            >
          </div>
        </template>
      </px-table-column>

      <px-table-column label="创建时间" prop="createTime">
        <template #default="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </px-table-column>
      <px-table-column label="创建人" prop="createByName">
        <template #default="scope">
          <span>{{ scope.row.createByName }}</span>
        </template>
      </px-table-column>
      <px-table-column label="修改时间" prop="updateTime">
        <template #default="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </px-table-column>
      <px-table-column label="修改人" prop="updateByName">
        <template #default="scope">
          <span>{{ scope.row.updateByName }}</span>
        </template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" align="center" width="220">
        <template #default="scope">
          <px-button v-has="'ACCOUNTINGBOUNDARY_DETAIL'" link type="primary" @click="handleDetail(scope.row)">
            <px-tooltip class="box-item" content="详情" placement="top">
              <px-icon>
                <Tickets />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button v-has="'ACCOUNTINGBOUNDARY_EDITOR'" link type="primary" @click="handleEditor(scope.row)">
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon> <Fork /> </px-icon></px-tooltip
          ></px-button>
          <px-button
            v-if="scope.row.templateStatus == '禁用'"
            v-has="'ACCOUNTINGBOUNDARY_STATUS'"
            link
            type="primary"
            @click="handleActivate(scope.row.id)"
          >
            <px-tooltip class="box-item" content="启动" placement="top">
              <px-icon>
                <PlayCircle />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button
            v-if="scope.row.templateStatus == '启用'"
            v-has="'ACCOUNTINGBOUNDARY_STATUS'"
            link
            type="danger"
            @click="handleForbidden(scope.row.id)"
          >
            <px-tooltip class="box-item" content="停止" placement="top">
              <px-icon>
                <PauseCircle />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button v-has="'ACCOUNTINGBOUNDARY_DELETE'" link type="danger" @click="handleDelete(scope.row)"
            ><px-tooltip class="box-item" content="删除" placement="top">
              <px-icon>
                <Delete />
              </px-icon> </px-tooltip
          ></px-button>
        </template>
      </px-table-column>
      <template #empty>
        <px-empty :image-size="150" />
      </template>
    </px-table>

    <pagination
      v-if="!equipopen && !equipopenDetail"
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      style="margin-bottom: -10px"
      :total="total"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <px-dialog v-model="innerVisible" width="1372" :close-on-click-modal="false" title="核算清单" align-center>
      <px-form v-show="showSearch" ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
        <px-form-item label="设施/活动名称">
          <px-input v-model="queryParams2.name" :maxlength="50" placeholder="请输入" clearable />
        </px-form-item>
        <px-form-item label="类别">
          <px-select v-model="queryParams2.category" placeholder="请选择" clearable style="width: 240px" filterable>
            <px-option v-for="dict in liquidList" :key="dict.id" :label="dict.itemName" :value="dict.itemName" />
          </px-select>
        </px-form-item>
        <px-form-item label="排放因子名称">
          <px-input v-model="queryParams2.emissionFactorName" :maxlength="50" placeholder="请输入" clearable />
        </px-form-item>
        <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery2('search')">搜索</px-button>
        <px-button style="margin-top: -17px" icon="" @click="resetQuery2">重置</px-button>
      </px-form>
      <px-table
        v-loading="loading"
        :data="rukuList"
        height="calc(100vh - 339px)"
        show-overflow-tooltip
        border
        @selection-change="handleSelectionChange2"
      >
        <px-table-column type="selection" width="40" />
        <px-table-column label="设施/活动名称" prop="name">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </px-table-column>
        <!-- <px-table-column label="所属厂区" width="160" prop="level">
          <template #default="scope">
            <span>{{ scope.row.level }}</span>
          </template>
        </px-table-column> -->
        <px-table-column label="类别" width="160" prop="category">
          <template #default="scope">
            <span>{{ scope.row.category }}</span>
          </template>
        </px-table-column>

        <px-table-column label="排放因子名称" prop="emissionFactorName">
          <template #default="scope">
            <span>{{ scope.row.emissionFactorName }}</span>
          </template>
        </px-table-column>
        <!-- <px-table-column label="GHG种类" prop="gasType">
          <template #default="scope">
            <span>{{ scope.row.gasType }}</span>
          </template>
        </px-table-column> -->
        <px-table-column label="CO₂e排放因子" prop="emissionFactorValue">
          <template #default="scope">
            <span>{{ scope.row.emissionFactorValue }}</span>
          </template>
        </px-table-column>
        <px-table-column label="排放因子单位" prop="activityLevelUnit">
          <template #default="scope">
            <span>{{ scope.row.activityLevelUnit }}</span>
          </template>
        </px-table-column>
        <!-- <px-table-column label="排放类别" prop="emissionCategory">
          <template #default="scope">
            <span>{{ scope.row.emissionCategory }}</span>
          </template>
        </px-table-column> -->
        <px-table-column label="发布年份" prop="releaseYear">
          <template #default="scope">
            <span>{{ scope.row.releaseYear }}</span>
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>

      <pagination
        v-show="total2 > 0"
        v-model:page="queryParams2.pageNum"
        v-model:limit="queryParams2.pageSize"
        style="margin-bottom: -10px"
        :total="total2"
        @pagination="getRukuList"
      />
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="innerVisible = false">取消</px-button>
          <px-button type="primary" :disabled="selectRukuList.length < 1" @click="saveTreehuodong()"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
    <px-dialog v-model="addtype" width="455" :close-on-click-modal="false" :title="treeTitle" align-center>
      <px-form v-show="showSearch" ref="treeruleFormRef" :rules="rules2" :model="treeQuery" label-width="80px" @keydown.enter.prevent>
        <px-row>
          <px-col :span="24">
            <px-form-item label="类别名称" prop="label">
              <px-input v-model="treeQuery.label" style="width: 290px" :maxlength="50" placeholder="请输入" clearable />
            </px-form-item>
          </px-col>
        </px-row>
        <!-- <px-row>
          <px-col :span="24">
            <px-form-item label="序号" prop="name">
              <px-input v-model="treeQuery.id" style="width: 290px" placeholder="请输入序号" clearable />
            </px-form-item>
          </px-col>
        </px-row> -->
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="addtype = false">取消</px-button>
          <px-button type="primary" @click="addTree(treeruleFormRef)"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>

    <px-dialog v-model="addtemplate" width="455" :close-on-click-modal="false" title="核算边界" align-center>
      <px-form v-show="showSearch" ref="detailruleFormRef" :model="equipdata" :rules="rules" :inline="true" label-width="80px">
        <px-row>
          <px-col :span="24">
            <px-form-item label="模板名称" prop="templateName">
              <px-input v-model="equipdata.templateName" :maxlength="50" style="width: 290px" placeholder="请输入模板名称" clearable />
            </px-form-item>
          </px-col>
        </px-row>
        <!-- <px-row>
          <px-col :span="24">
            <px-form-item label="核算模版" :maxlength="50" prop="boundaryName">
              <px-input v-model="equipdata.boundaryName" style="width: 290px" placeholder="请输入核算模版" clearable />
            </px-form-item>
          </px-col>
        </px-row> -->
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="addtemplate = false">取消</px-button>
          <px-button type="primary" @click="addTemplatename(detailruleFormRef)"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>

    <px-scrollbar v-if="addVisible" class="addEquip" style="height: 100%">
      <px-button style="margin-left: 24px" type="primary" :icon="ArrowLeft" @click="equipopenDetailcancel">返回</px-button>

      <px-form
        ref="detailruleFormRef"
        style="height: calc(100% - 10px)"
        :disabled="fromdisable"
        :rules="rules"
        :model="equipdata"
        :inline="true"
        class="demo-form-inline"
      >
        <px-row style="margin: 20px 0 0 24px">
          <px-col :span="6">
            <px-input v-model="equipdata.templateName" :maxlength="50" style="width: 290px" placeholder="请输入模板名称" clearable />
            <px-button style="margin-left: 16px" type="primary" @click="addTemplatename()"> 确定 </px-button>
          </px-col>
        </px-row>
        <div class="card-title">
          <!-- <p style="line-height: 30px">核算边界</p> -->
          <px-button style="position: absolute; top: 0; right: 104px" type="primary" :disabled="!addhuodong" plain @click="addTreeHuodong()"
            >添加设施/活动</px-button
          >
          <px-button style="position: absolute; top: 0; right: 24px" type="primary" @click="openSaveDialog">保存</px-button>
        </div>
        <px-row style="min-width: 1300px; height: calc(100% - 120px); padding: 0 24px 24px">
          <px-col :span="6" style="height: 100%; padding: 16px 22px; border: 1px solid #dfdfdf">
            <px-scrollbar height="100%">
              <px-tree
                ref="cascaderTreeRef"
                :data="dataSource"
                :props="defaultProps"
                :default-checked-keys="defaultkey"
                node-key="id"
                default-expand-all
                check-strictly
                :expand-on-click-node="false"
                style="width: 95%"
                @node-click="nodeselect"
              >
                <template #default="{ node, data }">
                  <span class="custom-tree-node">
                    <span v-if="node.level != 1" class="tree-label" @dblclick="editorTree(data)">{{ node.label }}</span>
                    <span v-else class="tree-label">{{ node.label }}</span>
                    <span class="treebtn">
                      <!-- <px-tooltip v-if="node.level != 1" px-tooltip class="box-item" content="编辑" placement="top">
                        <px-icon style="margin-right: 8px" color="#3B82F6" @click="editorTree(data)"><EditPen /></px-icon>
                      </px-tooltip> -->
                      <px-tooltip px-tooltip class="box-item" content="移除" placement="top">
                        <px-icon v-if="node.level != 1" style="margin-right: 8px" color="#3B82F6" @click="remove(node, data)">
                          <Remove />
                        </px-icon>
                      </px-tooltip>
                      <px-tooltip px-tooltip class="box-item" content="添加" placement="top">
                        <px-icon v-if="node.level != 3" color="#3B82F6" @click="append(data)">
                          <CirclePlus />
                        </px-icon>
                      </px-tooltip>
                    </span>
                  </span>
                </template>
              </px-tree>
            </px-scrollbar>
          </px-col>
          <px-col :span="18" style="height: 100%; padding-left: 12px">
            <px-table :data="huodongList" height="100%" border tooltip-effect show-overflow-tooltip>
              <px-table-column label="设施/活动" prop="name">
                <template #default="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </px-table-column>
              <!-- <px-table-column label="所属厂区" width="160" prop="level">
                <template #default="scope">
                  <span>{{ scope.row.level }}</span>
                </template>
              </px-table-column> -->
              <px-table-column label="序号" prop="serialNumber">
                <template #default="scope">
                  <span>{{ scope.row.serialNumber }}</span>
                </template>
              </px-table-column>

              <px-table-column label="设施/活动类别" width="160" prop="category">
                <template #default="scope">
                  <span>{{ scope.row.category }}</span>
                </template>
              </px-table-column>
              <px-table-column label="排放因子名称" prop="emissionFactorName">
                <template #default="scope">
                  <span>{{ scope.row.emissionFactorName }}</span>
                </template>
              </px-table-column>
              <px-table-column label="GHG种类" prop="gasType">
                <template #default="scope">
                  <span>{{ scope.row.gasType }}</span>
                </template>
              </px-table-column>
              <px-table-column label="CO₂e排放因子" prop="emissionFactorValue">
                <template #default="scope">
                  <span>{{ scope.row.emissionFactorValue }} {{ scope.row.moleculeUnit }}/{{ scope.row.denominatorUnit }}</span>
                </template>
              </px-table-column>

              <px-table-column label="活动水平单位" prop="activityLevelUnit">
                <template #default="scope">
                  <span>{{ scope.row.activityLevelUnit }}</span>
                </template>
              </px-table-column>
              <px-table-column label="关联能源数据" prop="relatedEnergyName">
                <template #default="scope">
                  <span>{{ scope.row.relatedEnergyName }}</span>
                </template>
              </px-table-column>

              <!-- <px-table-column label="单位换算比例" prop="unitConversionRatio">
                <template #default="scope">
                  <span>{{ scope.row.unitConversionRatio }}</span>
                </template>
              </px-table-column> -->
              <!-- <px-table-column label="排放类别" prop="emissionCategory">
                <template #default="scope">
                  <span>{{ scope.row.emissionCategory }}</span>
                </template>
              </px-table-column> -->
              <px-table-column v-if="!fromdisable" label="操作" align="center" width="80">
                <template #default="scope">
                  <px-button link type="danger" @click="handleDeleteceng(scope.row)"
                    ><px-tooltip class="box-item" effect="light" content="删除" placement="top">
                      <px-icon>
                        <Delete />
                      </px-icon> </px-tooltip
                  ></px-button>
                </template>
              </px-table-column>
            </px-table>
            <pagination
              v-show="queryParams3.total > 0"
              v-model:page="queryParams3.pageNum"
              v-model:limit="queryParams3.pageSize"
              class="table-pagination"
              :total="queryParams3.total"
              @pagination="() => queryBindingAccountingTemplate()"
            />
          </px-col>
        </px-row>
      </px-form>
    </px-scrollbar>
    <px-scrollbar v-if="detailVisible" class="editorEquip">
      <px-button style="margin-left: 24px" type="primary" :icon="ArrowLeft" @click="detailVisible = false">返回</px-button>
      <div class="px-descriptions__title" style="margin: 20px 0 0 20px">基本信息</div>
      <px-descriptions class="margin-top" style="padding: 20px" title="" :column="2" border>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">模板名称</div>
          </template>
          {{ equipdata.templateName }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">模板版本</div>
          </template>
          <px-select v-model="historyVersion" placeholder="请选择状态" clearable style="width: 240px" filterable @change="changeHistory">
            <px-option v-for="(item, index) in historyList" :key="index" :label="item.version" :value="item.id" />
          </px-select>
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">版本备注</div>
          </template>
          {{ historyDescription }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">创建时间</div>
          </template>
          {{ equipdata.createTime }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">创建人</div>
          </template>
          {{ equipdata.createByName }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">修改时间</div>
          </template>
          {{ equipdata.updateTime }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">修改人</div>
          </template>
          {{ equipdata.updateByName }}
        </px-descriptions-item>
        <!-- <px-descriptions-item>
          <template #label>
            <div class="cell-item">核算模版</div>
          </template>
          {{ equipdata.boundaryName }}
        </px-descriptions-item> -->
      </px-descriptions>
      <px-row style="min-width: 1300px; height: calc(100% - 120px); padding: 0 24px 24px">
        <px-col :span="6" style="height: 100%; padding: 16px 22px; border: 1px solid #dfdfdf">
          <px-scrollbar height="100%">
            <px-tree
              ref="cascaderTreeRef"
              :data="dataSource"
              :props="defaultProps"
              :default-checked-keys="defaultkey"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="nodeselect"
            >
              <template #default="{ node }">
                <span class="custom-tree-node">
                  <span class="tree-label">{{ node.label }}</span>

                  <!-- <span class="treebtn">
                  <px-tooltip v-if="node.level != 1" px-tooltip class="box-item" content="编辑" placement="top">
                    <px-icon style="margin-right: 8px" color="#3B82F6" @click="editorTree(data)"><EditPen /></px-icon>
                  </px-tooltip>
                  <px-tooltip px-tooltip class="box-item" content="移除" placement="top">
                    <px-icon v-if="node.level != 1" style="margin-right: 8px" color="#3B82F6" @click="remove(node, data)"><Remove /></px-icon>
                  </px-tooltip>
                  <px-tooltip px-tooltip class="box-item" content="添加" placement="top">
                    <px-icon v-if="node.level != 3" color="#3B82F6" @click="append(data)"><CirclePlus /></px-icon>
                  </px-tooltip>
                </span> -->
                </span>
              </template>
            </px-tree>
          </px-scrollbar>
        </px-col>
        <px-col :span="18" style="height: 100%; padding-left: 12px">
          <px-table :data="huodongList" height="100%" border tooltip-effect show-overflow-tooltip>
            <px-table-column label="设施/活动" prop="name">
              <template #default="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </px-table-column>
            <!-- <px-table-column label="所属厂区" width="160" prop="level">
              <template #default="scope">
                <span>{{ scope.row.level }}</span>
              </template>
            </px-table-column> -->
            <px-table-column label="序号" prop="serialNumber">
              <template #default="scope">
                <span>{{ scope.row.serialNumber }}</span>
              </template>
            </px-table-column>

            <px-table-column label="设施/活动类别" width="160" prop="category">
              <template #default="scope">
                <span>{{ scope.row.category }}</span>
              </template>
            </px-table-column>
            <px-table-column label="排放因子名称" prop="emissionFactorName">
              <template #default="scope">
                <span>{{ scope.row.emissionFactorName }}</span>
              </template>
            </px-table-column>
            <px-table-column label="GHG种类" prop="gasType">
              <template #default="scope">
                <span>{{ scope.row.gasType }}</span>
              </template>
            </px-table-column>
            <px-table-column label="CO₂e排放因子" prop="emissionFactorValue">
              <template #default="scope">
                <span>{{ scope.row.emissionFactorValue }} {{ scope.row.moleculeUnit }}/{{ scope.row.denominatorUnit }}</span>
              </template>
            </px-table-column>

            <px-table-column label="活动水平单位" prop="activityLevelUnit">
              <template #default="scope">
                <span>{{ scope.row.activityLevelUnit }}</span>
              </template>
            </px-table-column>
            <px-table-column label="关联能源数据" prop="relatedEnergyName">
              <template #default="scope">
                <span>{{ scope.row.relatedEnergyName }}</span>
              </template>
            </px-table-column>
            <!-- <px-table-column v-if="!fromdisable" label="操作" align="center" width="80">
              <template #default="scope">
                <px-button link type="danger" @click="handleDeleteceng(scope.row)"
                  ><px-tooltip class="box-item" effect="light" content="删除" placement="top">
                    <px-icon><Delete /></px-icon> </px-tooltip
                ></px-button>
              </template>
            </px-table-column> -->
          </px-table>
          <pagination
            v-show="queryParams3.total > 0"
            v-model:page="queryParams3.pageNum"
            v-model:limit="queryParams3.pageSize"
            class="table-pagination"
            :total="queryParams3.total"
            @pagination="() => queryBindingAccountingTemplate()"
          />
        </px-col>
      </px-row>
    </px-scrollbar>
    <px-dialog v-model="dialogVisible" title="保存提示" width="30%">
      <span>模板已被修改，模板将自动更新版本，请填写更新内容</span>
      <px-form ref="saveRuleFormRef" class="mt-4" :model="saveRuleForm" :rules="saveRules">
        <px-form-item label="版本备注" prop="description">
          <px-input v-model="saveRuleForm.description" placeholder="请输入" />
        </px-form-item>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="dialogVisible = false">取消</px-button>
          <px-button type="primary" @click="save(saveRuleFormRef)"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup name="Dict" lang="ts">
import {
  accountingBoundarydelete,
  accountingBoundarydetail,
  accountingBoundarysaveChildren,
  accountingTemplatebinding,
  accountingTemplatedelete,
  accountingTemplatedetail,
  accountingTemplateedit,
  accountingTemplateenableDisable,
  accountingTemplatefacilityList,
  accountingTemplatequery,
  accountingTemplatequeryBinding,
  accountingTemplatesave,
  accountingTemplateunbind
} from "@/api/doubleCarbonManage/accountingBoundary";
import { queryDraft, createDraft, getDraftDetail, deleteDraft, saveNewVersion, queryHistoryVersion } from "@/api/doubleCarbonManage/carbonAccounting";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { getToken } from "@/utils/auth";
import { ArrowLeft } from "@px-ui/icons-vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
const detailruleFormRef = ref();
const treeruleFormRef = ref();
const changeFlag = ref(false);
const isNoDraft = ref(true);
onMounted(() => {
  if (localStorage.getItem("chukuList")) {
  }
});
const { proxy }: any = getCurrentInstance();
function equipopenDetailcancel() {
  addVisible.value = false;
  changeFlag.value = false;
  handleQuery("search");
}
const addhuodong = ref(false);
const typeList = ref([]);
const equipopen = ref(false);
const equipopenDetail = ref(false);
const fromdisable = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const addVisible = ref(false);
const detailVisible = ref(false);
const innerVisible = ref(false);
const addtype = ref(false);
const addtemplate = ref(false);
const total = ref(0);
const total2 = ref(0);
const dateRange = ref([]);

// 图片是否上传完，是否可以保存
const buttonTitle = ref("");
const data = reactive({
  templateStatusList: [],
  rukuList: [],
  transportCompanyList: [],
  receiveCompanyList: [],
  typeIdList: [],
  categoryList: [],
  equipmentTypeList: [],
  positionList: [],
  selectRukuList: [],
  okselectRukuList: [],
  equipmentDeptList: [],
  modelIdList: [],
  form: {},
  wasteUnitoptions: [
    {
      value: "克",
      label: "克"
    },
    {
      value: "千克",
      label: "千克"
    },
    {
      value: "吨",
      label: "吨"
    }
  ],
  photoStatusFlag: false,
  equipdata: {
    id: "",
    templateName: "",
    createByName: "",
    updateByName: "",
    boundaryName: ""
  },
  treeQuery: {
    label: "",
    id: ""
  },
  queryParams: {
    orderByColumn: "",
    isAsc: "",
    templateName: "",
    templateStatus: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 20
  },
  queryParams2: {
    orderByColumn: "",
    isAsc: "",
    name: "",
    category: "",
    emissionFactorName: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 20
  },
  rules: {
    boundaryName: [{ required: true, message: "不能为空", trigger: "blur" }],
    templateName: [{ required: true, message: "不能为空", trigger: "blur" }]
  },
  rules2: {
    label: [{ required: true, message: "不能为空", trigger: "blur" }]
  },
  headers: {
    Authorization: "Bearer " + getToken().accessToken || ""
  },
  moduleName: "",
  dialogImageUrl: "",
  imageVisible: false,
  selectTree: {},
  treeTitle: "",
  parentId: null,
  huodongList: [],
  liquidList: [],
  selectTreeid: "",
  defaultkey: []
});

const {
  templateStatusList,
  parentId,
  selectRukuList,
  queryParams,
  queryParams2,
  form,
  rules,
  rules2,
  equipdata,
  rukuList,
  selectTree,
  treeTitle,
  treeQuery,
  huodongList,
  liquidList,
  selectTreeid,
  defaultkey
} = toRefs(data);

const addTreeHuodong = () => {
  innerVisible.value = true;
  getRukuList();
};
const getqueryCategoryList = () => {
  //设施活动类别
  queryChildByTypeCodeAndItemValue({
    value: "FACILITY_CATEGORY",
    typeCode: "BICARBON"
  }).then((response: any) => {
    //console.log(response);
    liquidList.value = response;
  });
  templateStatusList.value = [
    {
      itemName: "启用",
      itemValue: "启用"
    },
    {
      itemName: "禁用",
      itemValue: "禁用"
    }
  ];
};
interface Tree {
  id: number;
  label: string;
  level: number;
  children?: Tree[];
}
const queryParams3 = reactive({
  id: null,
  total: 0,
  pageNum: 1,
  pageSize: 20
});
/**
 * 根据树三级节点ID查询绑定的设施活动
 */
async function queryBindingAccountingTemplate(id?: number) {
  if (id) {
    queryParams3.id = id;
  }
  if (!queryParams3.id) return;
  const params = {
    id: queryParams3.id,
    pageNum: queryParams3.pageNum,
    pageSize: queryParams3.pageSize
  };
  const res = await accountingTemplatequeryBinding(params);
  queryParams3.total = res.total;
  queryParams3.pageNum = res.pageNum;
  huodongList.value = res.data;
}
const saveTreehuodong = () => {
  innerVisible.value = false;
  console.log(selectRukuList.value);
  const ids = selectRukuList.value.map(item => item.id);
  accountingTemplatebinding({
    boundaryId: selectTreeid.value,
    facilityIds: ids,
    createByName: JSON.parse(localStorage.getItem("userInfo")).username,
    updateByName: JSON.parse(localStorage.getItem("userInfo")).username
  }).then(res => {
    // console.log(res);
    PxMessage({
      message: `添加成功`,
      type: "success"
    });
    queryBindingAccountingTemplate(selectTreeid.value);
    changeFlag.value = true;
  });
};
const dataSource = ref([]);
const nodeselect = data => {
  defaultkey.value = [];
  cascaderTreeRef.value!.setCheckedKeys([], false);
  console.log(defaultkey.value);
  if (data.boundaryLevel == 3) {
    addhuodong.value = true;
    selectTreeid.value = data.id;
    queryBindingAccountingTemplate(data.id);
  } else {
    addhuodong.value = false;
    huodongList.value = [];
  }
};
const append = (data: Tree) => {
  treeQuery.value.label = "";
  addtype.value = true;
  selectTree.value = data;
  console.log(data);
  treeTitle.value = "新增类别";
  parentId.value = data.id;
};
const handletemplate = id => {
  addtemplate.value = true;
  accountingTemplatedetail({ id: id }).then((response: any) => {
    equipdata.value = response;
    buttonTitle.value = "编辑";
  });
};
const editorTree = (data: Tree) => {
  treeTitle.value = "修改类别";
  console.log(data);
  addtype.value = true;
  selectTree.value = data;
  treeQuery.value.label = data.name;
};
const tempName = ref("");
const handleFocus = row => {
  tempName.value = row.templateName;
};
const handleBlur = row => {
  if (tempName.value === row.templateName) return;
  const params2 = {
    id: row.id,
    templateName: row.templateName,
    createByName: JSON.parse(localStorage.getItem("userInfo")).username,
    updateByName: JSON.parse(localStorage.getItem("userInfo")).username,
    boundaryName: "核算模板"
  };
  accountingTemplateedit(params2).then((response: any) => {
    PxMessage({
      message: "修改成功",
      type: "success"
    });
    getList();
  });
};
const addTemplatename = () => {
  const params = {
    templateName: equipdata.value.templateName,
    createByName: JSON.parse(localStorage.getItem("userInfo")).username,
    updateByName: JSON.parse(localStorage.getItem("userInfo")).username,
    // boundaryName: equipdata.value.boundaryName
    boundaryName: "核算模板"
  };
  if (buttonTitle.value == "新增") {
    accountingTemplatesave(params).then((response: any) => {
      PxMessage({
        message: `${buttonTitle.value == "新增" ? "添加成功" : "修改成功"}`,
        type: "success"
      });
      resetQuery();
      addtemplate.value = false;
      equipdata.value.templateId = response.templateId;
      handleEditorname(response.boundaryId);
    });
    getList();
  } else {
    const params2 = {
      id: equipdata.value.templateId,
      templateName: equipdata.value.templateName,
      createByName: JSON.parse(localStorage.getItem("userInfo")).username,
      updateByName: JSON.parse(localStorage.getItem("userInfo")).username,
      boundaryName: "核算模板"
    };
    accountingTemplateedit(params2).then((response: any) => {
      PxMessage({
        message: `${buttonTitle.value == "新增" ? "添加成功" : "修改成功"}`,
        type: "success"
      });
      resetQuery();
      addtemplate.value = false;
    });
    getList();
  }
};
const addTree = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (treeTitle.value == "新增类别") {
        console.log(selectTree.value);
        accountingBoundarysaveChildren({
          name: treeQuery.value.label,
          serialNo: `${selectTree.value.boundaryLevel + 1}-${selectTree.value.children.length + 1}`,
          parentId: selectTree.value.id,
          boundaryLevel: selectTree.value.boundaryLevel + 1,
          createByName: JSON.parse(localStorage.getItem("userInfo")).username,
          updateByName: JSON.parse(localStorage.getItem("userInfo")).username
        }).then(res => {
          console.log(res);
          addtype.value = false;
          dataSource.value = [res];
          changeFlag.value = true;
        });
      } else {
        accountingBoundarysaveChildren({
          name: treeQuery.value.label,
          serialNo: selectTree.value.serialNo,
          id: selectTree.value.id,
          parentId: selectTree.value.parentId,
          updateByName: JSON.parse(localStorage.getItem("userInfo")).username
        }).then(res => {
          console.log(res);
          addtype.value = false;
          dataSource.value = [res];
          changeFlag.value = true;
        });
      }
    }
  });
};
const remove = (node: any, data: Tree) => {
  PxMessageBox.confirm("是否删除该节点？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    confirmButtonClass: "px-button--danger",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      accountingBoundarydelete({
        id: data.id
      }).then(res => {
        PxMessage({
          message: "删除成功",
          type: "success"
        });
        dataSource.value = [res];
        changeFlag.value = true;
      });
    })
    .catch(() => {});
};

function handleDeleteceng(row) {
  PxMessageBox.confirm("是否确认删除设施/活动信息？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      accountingTemplateunbind({
        boundaryId: selectTreeid.value,
        facilityId: row.id
      }).then(res => {
        // console.log(res);
        PxMessage({
          message: "删除成功",
          type: "success"
        });
        queryBindingAccountingTemplate(selectTreeid.value);
        changeFlag.value = true;
      });
    })
    .catch(() => {});
}
const addsave = () => {};
getqueryCategoryList();
function getRukuList() {
  loading.value = true;
  if (localStorage.getItem("facList")) {
    let faclist = JSON.parse(localStorage.getItem("facList"));
    if (faclist.length == 1) {
      queryParams2.value.level = faclist[0].name;
    } else if (faclist.length == 2) {
      queryParams2.value.level = faclist.filter(item => item.code == localStorage.getItem("facCode"))[0].name;
    }
  }
  accountingTemplatefacilityList(queryParams2.value).then((response: any) => {
    rukuList.value = response.data;
    total2.value = response.total;
    loading.value = false;
  });
}

function getList() {
  loading.value = true;
  accountingTemplatequery(queryParams.value).then((response: any) => {
    typeList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}
const removechukuList = () => {
  localStorage.removeItem("chukuList");
};
/** 取消按钮 */

/** 表单重置 */
function reset() {
  form.value = {
    id: undefined,
    dictionaryName: undefined,
    dictionaryType: undefined,
    status: "VALID",
    remarks: undefined
  };
  proxy.resetForm("dictRef");
}
/** 搜索按钮操作 */
function handleQuery(type) {
  if (type == "search") {
    queryParams.value.pageNum = 1;
  }
  getList();
}
function handleQuery2(type) {
  if (type == "search") {
    queryParams2.value.pageNum = 1;
  }
  getRukuList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    orderByColumn: "",
    isAsc: "",
    templateName: "",
    templateStatus: "",
    orderBy: ""
  };
  dateRange.value = [];
  handleQuery("reset");
}

function resetQuery2() {
  queryParams2.value = {
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    orderByColumn: "",
    isAsc: "",
    name: "",
    category: "",
    emissionFactorName: "",
    orderBy: ""
  };
  dateRange.value = [];
  handleQuery2("reset");
}

/** 新增按钮操作 */
function handleAdd() {
  buttonTitle.value = "新增";
  // addtemplate.value = true;
  huodongList.value = [];
  equipdata.value = {
    id: "",
    templateName: "核算模板",
    createByName: "",
    updateByName: "",
    boundaryName: ""
  };
  addVisible.value = true;
  dataSource.value = [];
  // detailruleFormRef.value.resetFields();
  // addTemplatename();
}
const historyList = ref([]);
const historyVersion = ref("");
const historyDescription = ref("");
const changeHistory = async (id: number) => {
  historyDescription.value = historyList.value.find(i => i.id === id).description;
  dataSource.value = [];
  huodongList.value = [];
  const data = await accountingTemplatedetail({ id });
  console.log(data);
  equipdata.value = data;

  const data2 = data.treeDTO;
  // equipopenDetail.value = true;
  // fromdisable.value = false;
  // equipdata.value = data;
  if (data2.children.length > 0) {
    if (data2.children[0].children.length > 0) {
      selectTreeid.value = data2.children[0].children[0].id;
      defaultkey.value = [data2.children[0].children[0].id];
      console.log(defaultkey.value);
      // cascaderTreeRef.value.setCheckedKeys(defaultkey.value, true);
      await queryBindingAccountingTemplate(data2.children[0].children[0].id);
      addhuodong.value = true;
    }
  }
  dataSource.value = [data2];
};
const handleDetail = async val => {
  dataSource.value = [];
  detailVisible.value = true;
  huodongList.value = [];
  const data = await accountingTemplatedetail({ id: val.id });
  console.log(data);
  // 新获取历史版本数据
  const hisRes = await queryHistoryVersion({ id: val.id });
  console.log(`output->hisRes`, hisRes);
  historyList.value = hisRes;
  historyVersion.value = historyList.value[0].version;
  historyDescription.value = historyList.value[0].description;
  // equipopen.value = true;
  // // equipopenDetail.value = true;
  // fromdisable.value = true;
  equipdata.value = data;

  const data2 = await accountingBoundarydetail({ id: val.boundaryId });
  // equipopenDetail.value = true;
  // fromdisable.value = false;
  // equipdata.value = data;
  if (data2.children.length > 0) {
    if (data2.children[0].children.length > 0) {
      selectTreeid.value = data2.children[0].children[0].id;
      defaultkey.value = [data2.children[0].children[0].id];
      console.log(defaultkey.value);
      // cascaderTreeRef.value.setCheckedKeys(defaultkey.value, true);
      await queryBindingAccountingTemplate(data2.children[0].children[0].id);
      addhuodong.value = true;
    }
  }
  dataSource.value = [data2];
};
const handleActivate = id => {
  accountingTemplateenableDisable({
    id: id,
    flag: 1
  }).then(res => {
    console.log(res);
    getList();
  });
};
const handleForbidden = id => {
  accountingTemplateenableDisable({
    id: id,
    flag: 0
  }).then(res => {
    console.log(res);
    getList();
  });
};

const defaultProps = {
  children: "children",
  label: "name",
  id: "id"
};
const cascaderTreeRef = ref(null);
const handleEditorname = async id => {
  buttonTitle.value = "编辑";
  const data = await accountingBoundarydetail({ id: id });
  // console.log(data.children[0].children[0].id);
  draftId.value = data.templateId;
  if (data.children.length > 0) {
    if (data.children[0].children.length > 0) {
      selectTreeid.value = data.children[0].children[0].id;
      defaultkey.value = [data.children[0].children[0].id];
      console.log(defaultkey.value);
      // cascaderTreeRef.value.setCheckedKeys(defaultkey.value, true);
      await queryBindingAccountingTemplate(data.children[0].children[0].id);
      addhuodong.value = true;
    }
  }

  dataSource.value = [data];
};
const initEquipData = async () => {
  if (equipdata.value.children.length > 0) {
    if (equipdata.value.children[0].children.length > 0) {
      selectTreeid.value = equipdata.value.children[0].children[0].id;
      defaultkey.value = [equipdata.value.children[0].children[0].id];
      console.log(defaultkey.value);
      // cascaderTreeRef.value.setCheckedKeys(defaultkey.value, true);
      await queryBindingAccountingTemplate(equipdata.value.children[0].children[0].id);
      addhuodong.value = true;
    }
  }

  dataSource.value = [equipdata.value];
};
const draftId = ref(null);
// 增加草稿判断逻辑
async function hasDraft(id: any) {
  const res = await queryDraft({ id });
  if (!res) {
    // 无草稿创建草稿
    const cRes = await createDraft({ id });
    console.log(`output->cRes`, cRes);
    equipdata.value = cRes.treeDTO;
    draftId.value = cRes.id;
    equipdata.value.templateName = cRes.templateName;
    console.log(`output->equipdata.value`, equipdata.value);
    initEquipData();
    isNoDraft.value = true;
  } else {
    // 有草稿弹框判断是否弃用
    PxMessageBox.confirm("是否使用草稿？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true
    })
      .then(async () => {
        const dRes = await getDraftDetail({ id });
        console.log(`output->dRes`, dRes);
        equipdata.value = dRes.treeDTO;
        draftId.value = dRes.id;
        equipdata.value.templateName = dRes.templateName;
        initEquipData();
        isNoDraft.value = false;
      })
      .catch(async () => {
        const dRes = await deleteDraft({ id });
        console.log(`output->dRes`, dRes);
        equipdata.value = dRes.treeDTO;
        draftId.value = dRes.id;
        equipdata.value.templateName = dRes.templateName;
        initEquipData();
        isNoDraft.value = true;
      });
  }
}
const handleEditor = async val => {
  dataSource.value = [];
  huodongList.value = [];
  addhuodong.value = false;
  buttonTitle.value = "编辑";
  // jibenxinxiFlg.value = true;
  // jiqicanshuFlg.value = true;
  // shebeitaizhangFlg.value = true;
  // moxingshezhiFlg.value = true;
  if (val.templateStatus == "禁用") {
    addVisible.value = true;
    hasDraft(val.id);
    // const data = await accountingBoundarydetail({ id: val.boundaryId });
    // console.log(data.children[0].children[0].id);
    // equipdata.value = data;
    // if (data.children.length > 0) {
    //   if (data.children[0].children.length > 0) {
    //     selectTreeid.value = data.children[0].children[0].id;
    //     defaultkey.value = [data.children[0].children[0].id];
    //     console.log(defaultkey.value);
    //     // cascaderTreeRef.value.setCheckedKeys(defaultkey.value, true);
    //     await queryBindingAccountingTemplate(data.children[0].children[0].id);
    //     addhuodong.value = true;
    //   }
    // }

    // dataSource.value = [data];
  } else {
    PxMessage({
      message: `启用状态下不能修改绑定的设施活动`,
      type: "error"
    });
  }
};
/** 多选框选中数据 */
function handleSelectionChange2(selection) {
  // console.log(selection);
  selectRukuList.value = selection;
}

/** 删除按钮操作 */
function handleDelete(row) {
  PxMessageBox.confirm("是否确认删除？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    confirmButtonClass: "px-button--danger",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const data = await accountingTemplatedelete({ id: row.id });
      PxMessage({
        message: "删除成功",
        type: "success"
      });
      getList();
    })
    .catch(() => {});
}

/** 导出按钮操作 */
// function handleExport() {
//   const dictIds = [];
//   dictIds.push(...ids.value);
//   const params = { ids: dictIds };
//   proxy.download("post", "/operation/api/v1/water/hazardWasteOut/export", params, "危险废弃物出库.xlsx");
// }
getList();
interface SaveRuleForm {
  description: string;
}
const saveRuleFormRef = ref();
const saveRuleForm = reactive<SaveRuleForm>({
  description: ""
});
const saveRules = reactive({
  description: [
    { required: true, message: "请填写版本备注", trigger: ["blur", "change"] },
    { max: 50, message: "备注不能超过50个字", trigger: ["blur", "change"] }
  ]
});
const dialogVisible = ref(false);
// 判断是否此次有修改 是->填写备注 否->不保存 返回列表
function openSaveDialog() {
  // 无草稿 并且无编辑 无需保存
  if (!changeFlag.value && isNoDraft.value) {
    equipopenDetailcancel();
  } else {
    dialogVisible.value = true;
  }
}
async function save(formEl: any) {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const res = await saveNewVersion({ id: draftId.value, description: saveRuleForm.description });
        PxMessage({
          type: "success",
          message: "保存成功!"
        });
        dialogVisible.value = false;
        equipopenDetailcancel();
      } catch (error) {
        PxMessage({
          type: "error",
          message: "保存失败!"
        });
        dialogVisible.value = false;
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}
</script>
<style scoped lang="scss">
.addEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.editorEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.px-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2002;
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-right: 34px;
  text-align: right;
  background: white;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}

.card-header {
  min-height: 40px;
  padding: 14px 15px 7px !important;
  cursor: pointer;
  user-select: none;
  background: #e7eefb;
}

.card-title {
  float: left;
  width: 100%;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 14px;
}

.card-main {
  float: left;
  margin: -3px 8px 0 5px;
  cursor: pointer;
}

.box-card1 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card2 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card3 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card4 {
  width: calc(100% - 48px);
  height: 261px;
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.demo-form-inline {
  .px-input {
    --px-input-width: calc(100% - 70px);
  }

  .px-form-item {
    width: 100%;
  }

  .px-textarea__inner {
    width: calc(100% - 100px) !important;
  }

  .px-form-item__label {
    font-weight: 400 !important;
  }
}

.form-div {
  padding: 24px;

  .px-row {
    margin-bottom: 16px;
  }
}

.px-icon {
  font-size: 16px !important;
}

:deep(.px-tabs--top .px-tabs__item.is-top.is-active) {
  border: none;

  .pane-bottom {
    line-height: 30px;
    border-bottom: 2px solid #3b82f6;
  }
}

:deep(.px-tabs .px-tabs__item) {
  .pane-bottom {
    line-height: 30px;
  }
}

.pane-line {
  position: absolute;
  top: 12px;
  right: 0;
  height: 15px;
  color: #dcdcdc;
  border-left: 1px solid #dcdcdc;
}

:deep(.custom-form-ui .px-form-item) {
  width: 250px !important;
}

.filename {
  position: absolute;
  bottom: -30px;
  width: 96px;
  overflow: hidden;
  color: rgb(166 167 172);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.px-descriptions__label.px-descriptions__cell.is-bordered-label) {
  width: 166px;
  background: #e7eefb;
  border: 1px solid #dfdfdf;
}

:deep(.px-descriptions__body .px-descriptions__table.is-bordered .px-descriptions__cell) {
  border: 1px solid #dfdfdf;
}

.cell-item {
  text-align: right;
}

:deep(.px-table__header) {
  thead {
    tr {
      background-color: #e7eefb !important;

      th {
        font-size: 13px;
        font-weight: bold;
        color: #000;
        background-color: #e7eefb !important;
      }
    }
  }
}

:deep(.px-table--isfixedHeader .px-table__header-wrapper .px-table-fixed-column--right) {
  background-color: #e7eefb !important;
}

.legend-item {
  display: flex;
  gap: 8px;
  align-items: center;

  .legend-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .background-done {
    background: #00b36d;
  }

  .background-done2 {
    background: #a1a1a1;
  }

  .legend-text {
    font-size: 12px;
    line-height: 1;
    color: #00b36d;
    white-space: nowrap;
  }

  .legend-text2 {
    font-size: 12px;
    line-height: 1;
    color: #a1a1a1;
    white-space: nowrap;
  }
}

.custom-tree-node {
  position: relative;
  width: 100%;

  .treebtn {
    position: absolute;
    top: 10px;
    right: 0;
  }
}

:deep(.px-scrollbar__view) {
  height: calc(100% - 50px);
}

.tree-label {
  display: inline-block;
  width: 150px;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
